/*
 * 商品推荐
 * @Author: ljb
 * @Date: 2018-06-06 14:14:03
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-07-02 14:38:22
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .v-component-recommend {
        margin-bottom: 30*@rem-per-px;
        h1 {
            padding-left: 20*@rem-per-px;
            margin-bottom: 30*@rem-per-px;
            border-left: 2px solid #bf77fa;
            font-size: 20*@rem-per-px;
            font-weight: normal;
        }
        .product-lists {
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
            display: flex;
            .lists-top {
                position: relative;
                display: inline-block;
                width: 120*@rem-per-px;
                height: 120*@rem-per-px;
                margin-right: 10*@rem-per-px;
                border-radius: 10*@rem-per-px;
                overflow: hidden;
                a {
                    display: block;
                    font-size: 0;
                    img {
                        width: 120*@rem-per-px;
                        height: 120*@rem-per-px;
                    }
                }
                .type_icon {
                    width: 40%;
                    top: 0;
                }
                img {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    vertical-align: bottom;
                }
            }
            .lists-bottom {
                width: 120*@rem-per-px;
                text-align: center;
                p {
                    font-size: 20*@rem-per-px;
                    padding: 2px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    flex: 1;
                }
                span {
                    font-size: 20*@rem-per-px;
                }
            }
        }
    }

</style>
<template>
	<div class="v-component-recommend">
		<h1>{{ $t('recommend.title') }}</h1>
		<div class="product-lists">
			<div
				v-for="(item, key) in productData"
				:key="key">
				<div class="lists-top">
					<div
						@click="link_jump(item.link_product ? item.link_product.url : '')">
						<img
							:src="item.thumb_url"
							alt="">
						<img
							v-if="item.link_product ? true : false"
							:src="item.link_product ? item.link_product.type_icon : ''"
							alt=""
							class="type_icon">
						<img
							v-if="item.link_product ? true : false"
							:src="cart_icon"
							alt="">
					</div>
				</div>
				<div class="lists-bottom">
					<p>{{ item.name }}</p>
					<span>{{ $t('common.cash') + parseFloat(item.sell_price).toFixed(2) }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Recommend',
	props: {
		productData: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			cart_icon: require('src/assets/media/img/user/records/shopping_cart.png'),
		};
	},
	methods: {
		link_jump(url) {
			if (url) {
				window.location.href = url;
				return;
			}
			const toast = this.$createToast({
				type: 'error',
				time: 2000,
				txt: this.$t('common.no_link'),
			});
			toast.show();
		},
	},
};
</script>
